
<div data-role="content" class="jqm-content">
  <div data-role="controlgroup" data-type="horizontal" style="clear: both">
    <a href="#Rank" data-role="button" id="rank">Rank</a>
    <a href="#Money" data-role="button" id="money">Money Chart</a>
    <a href="#Chart" data-role="button" id="chart">Point Chart</a>
  </div>
  <p class="ajax_content"></p>
  <div class="pie_chart" >
      <div id="container1" style=" margin: 0 ;"></div>
  </div>
  <p class="table_content">
  <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
    <thead>
      <tr class="ui-bar-d">
        <th data-priority="2">Rank</th>
        <th>Nickname</th>
        <th data-priority="2">Win</th>
        <th data-priority="3"><abbr title="Rotten Tomato Rating">Lost</abbr></th>
		<th data-priority="4">Rate(%)</th>
        <th data-priority="1">Point</th>
        <th data-priority="1">Money</th>
      </tr>
    </thead>
    <tbody>
      <?php
      foreach ($rank as $key => $val) {
        ?>
        <tr>
          <th><?php echo $key + 1 ?></th>
          <td><?php echo $val['member_name'] ?></td>
          <td><?php echo $val['count_win'] ?></td>
          <td><?php echo $val['count_lost'] ?></td>
		  <td><?php $num =100 * $val['count_win']/($val['count_win'] + $val['count_lost']); echo number_format($num, 2); ?></td>
          <td><?php echo $val['rank'] ?></td>
          <td class="red"><?php echo Yii::app()->NumberFormatter->format("$ #,##0", $val['money'], "VND"); ?></td>

        </tr>
        <?php
      }
      ?>


    </tbody>
  </table>
</p>
</div><!-- /content -->

<script>
    $(function () {
    $('#container1').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Percentage money'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Money Chart',
            data: [
              <?php
      foreach ($rank as $key => $val) {
        ?>
                ['<?php echo $val['member_name'] ?>',   <?php echo $val['money']?$val['money']:0 ?>],

        <?php
          }
        ?>
            ]
        }]
    });
});
</script>

<script>
  $(document).ready(function(){
    $('.pie_chart').children().hide();
    $('#money').click(function(){
      $('.pie_chart').children().show();
      $('#table-custom-2, .ui-table-columntoggle-btn').hide();
      $('.ajax_content').children().hide();
    });
    $('#chart').click(function(){

      if ($('.ajax_content').text().length == 0) {
      $.post('<?php echo Yii::app()->createUrl('intro/chart'); ?>',function(res){
        $('.ajax_content').html(res);
        $('#table-custom-2, .ui-table-columntoggle-btn').hide();
        $('.pie_chart').children().hide();
      });
      } else {
        $('.ajax_content').children().show();
        $('#table-custom-2, .ui-table-columntoggle-btn').hide();
      }
    });
    $('#rank').click(function(){
      $('.ajax_content').children().hide();
      $('.pie_chart').children().hide();
      $('#table-custom-2, .ui-table-columntoggle-btn').show();
    });
  });
</script>